<template>
  <div class="body" v-if="article">
    <div class="index">
      <Navbar/>
      <div class="info">
        <div class="desc">{{ article.title }}</div>
      </div>
      <div class="down">
        <icon name="chevron-down" scale="1.5"/>
      </div>
    </div>
    <div class="content-body">
      <div class="content" v-html="mdToHtml" v-highlight></div>
      <div class="remarks">
        <ul>
          <li><span class="icon icon-user"><icon name="user" scale="0.6"/></span><span>&nbsp;文章作者：My</span></li>
          <li><span class="icon icon-link"><icon name="link" scale="0.6"/></span><span>&nbsp;链接地址：http://www.my.blog.com/view</span></li>
          <li><span class="icon icon-share"><icon name="share" scale="0.6"/></span><span>&nbsp;版权声明：本博客所有文章除特别声明外均为原创！转载请注明！谢谢！</span></li>
        </ul>
      </div>
      <div class="article-info">
        <span><icon name="eye" scale="0.9"/> {{ article.views }}</span>
        <span><icon name="comment" scale="0.8"/> {{ article.commentCount }}</span>
        <span><icon name="tags" scale="0.8"/> {{ article.tagText }}</span>
      </div>
    </div>
    <div class="comment-log">
      <p class="no-comment">快来评论吧！(☆▽☆)</p>
      <div class="comment-item">
        <div class="item-cover">
          <div class="comment-item-left">
            <img src="../assets/bg.jpg">
            <div class="item-info">
              <div class="info-name">测试</div>
              <div class="info-date">2020年12月23日 12:12:32</div>
            </div>
          </div>
          <div class="comment-item-right">
            <button type="button" @click="replyComment = !replyComment">回复</button>
          </div>
        </div>
        <div class="item-content">
          这是测试内容
        </div>
        <div v-show="replyComment" class="comment-body">
          <div class="comment-info">
            <ul>
              <li><input type="text" placeholder="昵称"></li>
              <li><input type="text" placeholder="邮箱"></li>
              <li><input type="text" placeholder="网址"></li>
            </ul>
          </div>
          <div class="comment-text">
            <textarea/>
          </div>
          <div class="comment-submit">
            <button type="button">评论</button>
          </div>
        </div>
        <div class="child">
          <ul>
            <li>
              <div class="comment-item">
                <div class="item-cover">
                  <div class="comment-item-left">
                    <img src="../assets/bg.jpg">
                    <div class="item-info">
                      <div class="info-name">测试1<span> 回复</span>@测试</div>
                      <div class="info-date">2020年12月23日 12:12:32</div>
                    </div>
                  </div>
                  <div class="comment-item-right">
                    <button type="button" @click="replyComment = !replyComment">回复</button>
                  </div>
                </div>
                <div class="item-content">
                  这是测试内容
                </div>
                <div v-show="replyComment" class="comment-body">
                  <div class="comment-info">
                    <ul>
                      <li><input type="text" placeholder="昵称"></li>
                      <li><input type="text" placeholder="邮箱"></li>
                      <li><input type="text" placeholder="网址"></li>
                    </ul>
                  </div>
                  <div class="comment-text">
                    <textarea/>
                  </div>
                  <div class="comment-submit">
                    <button type="button">评论</button>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div v-show="!replyComment" class="comment-body">
      <h4 style="margin-bottom: 10px">发表评论</h4>
      <div class="comment-info">
        <ul>
          <li><input type="text" placeholder="昵称"></li>
          <li><input type="text" placeholder="邮箱"></li>
          <li><input type="text" placeholder="网址"></li>
        </ul>
      </div>
      <div class="comment-text">
        <textarea/>
      </div>
      <div class="comment-submit">
        <button type="button">评论</button>
      </div>
    </div>
    <Footer/>
  </div>
</template>

<script>
import '../assets/js/snow'
import Navbar from '../components/Navbar'
import Footer from '../components/Footer'
import marked from 'marked'
import '../util/hljs'
import { addCodeBtn } from '../assets/js/mavon'
import '../assets/css/movon.scss'
export default {
  name: 'Index',
  components: { Footer, Navbar },
  data () {
    return {
      replyComment: false,
      article: null
    }
  },
  mounted () {
    this.$http.get(`/api/article/get/${this.$route.params.articleId}`).then(res => {
      if (res.code === 200) {
        this.article = res.data.article
        document.getElementById('app').style.backgroundImage = 'url(' + this.article.imageLink + ')'
        document.getElementById('app').style.backgroundColor = 'rgba(0, 0, 0, .2)'
        document.getElementById('app').style.backgroundPosition = 'center top'
        document.getElementById('app').style.backgroundRepeat = 'no-repeat'
        document.getElementById('app').style.backgroundAttachment = 'fixed'
        document.getElementById('app').style.backgroundSize = 'auto 100%'
        this.$http.get(`api/comment/get/${this.article.id}`).then(res => {
          console.log(res.data)
        })
      }
    })
  },
  computed: {
    mdToHtml () {
      if (this.article) {
        this.$nextTick(_ => addCodeBtn())
        return marked(this.article.content)
      }
    }
  }
}
</script>

<style scoped lang="scss">
.body {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .2);
  box-shadow:inset 0px -60px 40px -20px #FFF;
  .index {
    width: 100%;
    height: 100%;
    .info {
      text-align: center;
      margin: 0 auto;
      position: relative;
      top: 55%;
      transform: translateY(-50%);
      .desc {
        font-size: 2.85em;
        font-family: 华文行楷,serif;
        color: #FFFFFF;
        text-shadow: 0.1rem 0.1rem 0.2rem rgb(0 0 0 / 15%);
      }
    }
    .down {
      text-align: center;
      margin: 0 auto;
      position: relative;
      top: 85%;
      transform: translateY(-50%);
      color: #EEEEEE;
    }
  }
  .content-body {
    width: 60%;
    min-width: 350px;
    margin: 0 auto 30px;
    .remarks {
      background-color: #121212;
      border-radius: 10px;
      margin: 30px 0 0 0;
      padding: 20px 30px;
      color: #EEEEEE;
      font-size: 14px;
      font-family: "Comic Sans MS",serif;
      ul {
        li {
          margin-bottom: 5px;
          .icon {
            width: 16px;
            height: 16px;
            text-align: center;
            border-radius: 50%;
            display: inline-block;
            vertical-align: -0.2em;
            svg {
              color: #FFFFFF;
              vertical-align: 0.35em;
            }
          }
          .icon-user {
            background-color: rgb(36, 159, 248);
          }
          .icon-link {
            background-color: rgb(57, 181, 74);
          }
          .icon-share {
            background-color: rgb(243, 178, 67);
          }
        }
      }
    }
    .article-info {
      span {
        margin-right: 20px;
        font-size: 0.7em;
        font-family: "Comic Sans MS",serif;
        color: pink;
      }
    }
  }
  .comment-body {
    margin: 0 auto;
    width: 60%;
    min-width: 350px;
    .comment-info {
      ul {
        display: flex;
        align-items: center;
        li {
          flex: auto;
          input {
            outline:none;
            width: 95%;
            height: 35px;
            border-radius: 10px;
            border: 3px solid rgba(26, 188, 156, 0.4);
            padding-left: .5em;
            font-family: "Comic Sans MS",serif;
          }
        }
      }
    }
    .comment-text {
      padding-top: 20px;
      textarea {
        border-radius: 5px;
        width: 97%;
        height: 100px;
        border: 3px solid rgba(26, 188, 156, 0.4);
        padding: .5em;
        outline:none;
        font-family: "Comic Sans MS",serif;
      }
    }
    .comment-submit {
      text-align: right;
      button {
        outline: none;
        border-radius: 10px;
        background-color: #FFFFFF;
        border: 3px solid #2dce89;
        padding: .5em 1em;
        color: #00947e;
        cursor: pointer;
        font-weight: bold;
      }
      button:hover {
        background-color: #2dce89;
        color: #FFFFFF;
      }
    }
  }
  .comment-log {
    width: 60%;
    min-width: 350px;
    margin: 0 auto 30px;
    .no-comment {
      text-align: center;
      margin: 20px;
      color: #555;
      font-family: "Comic Sans MS",serif;
      display: none;
    }
    .comment-item {
      .item-cover {
        .comment-item-left {
          float: left;
          width: 85%;
          img {
            border-radius: 50%;
            width: 60px;
            height: 60px;
            float: left;
          }
          .item-info {
            display: flex;
            flex-direction: column;
            font-family: "Comic Sans MS",serif;
            height: 60px;
            padding-left: 10px;
            .info-name {
              flex: auto;
              font-weight: bold;
              font-size: 1.1em;
              line-height: 30px;
              hite-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            .info-date {
              flex: auto;
              font-size: .8em;
              line-height: 30px;
            }
          }
        }
        .comment-item-right {
          float: right;
          line-height: 60px;
          button {
            outline: none;
            border-radius: 10px;
            background-color: #FFFFFF;
            border: 0;
            cursor: pointer;
            color: #555555;
          }
          button:hover {
            color: #888888;
          }
        }
      }
      .item-content {
        clear: both;
        margin-top: 10px;
        margin-left: 70px;
        min-width: 350px;
        font-size: 0.9em;
      }
      .comment-body {
        margin-left: 70px;
        margin-top: 20px;
        width: auto;
      }
      .child {
        margin-top: 30px;
        margin-left: 70px;
        .comment-item {
          .item-cover {
            .comment-item-left {
              float: left;
              width: 85%;
              img {
                border-radius: 50%;
                width: 50px;
                height: 50px;
                float: left;
              }
              .item-info {
                display: flex;
                flex-direction: column;
                font-family: "Comic Sans MS",serif;
                height: 50px;
                padding-left: 10px;
                .info-name {
                  flex: auto;
                  font-weight: bold;
                  font-size: 1em;
                  line-height: 25px;
                  hite-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  span {
                    font-weight: normal;
                  }
                }
                .info-date {
                  flex: auto;
                  font-size: .7em;
                  line-height: 25px;
                }
              }
            }
            .comment-item-right {
              float: right;
              line-height: 50px;
              button {
                outline: none;
                border-radius: 10px;
                background-color: #FFFFFF;
                border: 0;
                cursor: pointer;
                color: #555555;
              }
              button:hover {
                color: #888888;
              }
            }
          }
          .item-content {
            clear: both;
            margin-top: 10px;
            margin-left: 60px;
            min-width: 350px;
            font-size: 0.9em;
          }
          .comment-body {
            margin-left: 60px;
            margin-top: 20px;
            width: auto;
          }
        }
      }
    }

  }
}
</style>
